<template>
  <movable-area v-if="x" class="movable-area">
    <movable-view class="movable-view" :x="x" :y="y" :animation="false" @change="changepyl" direction="all">
      <slot/>
    </movable-view>
  </movable-area>
</template>
<script setup>
import {ref} from 'vue'
import {useDidShow} from '@tarojs/taro'

const props = defineProps(
  ['keys', 'x', 'Y']
)

const x = ref(0)
const y = ref(0)

// setPyl()

useDidShow(() => {
  setPyl()
})

function setPyl() {
  const pyl = wx.getStorageSync(props.keys)
  if (pyl) {
    x.value = pyl.x
    y.value = pyl.y
  } else {
    const systemInfo = wx.getSystemInfoSync()
    const x1 = props.x || systemInfo.windowWidth - (systemInfo.windowWidth / 750) * 140
    const y1 = props.y || systemInfo.windowHeight - (systemInfo.windowWidth / 750) * 160
    x.value = x1
    y.value = y1
    wx.setStorageSync(props.keys, {x, y})
  }
}

function changepyl(e) {
  const {x, y} = e.detail
  wx.removeStorageSync(props.keys)
  wx.setStorageSync(props.keys, {x, y})
}
</script>
<style>
.movable-area {
  pointer-events: none;
  z-index: 100;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.movable-view {
  pointer-events: auto;
}
</style>
